<template>
    <div class="app">
        <div style="width: 200px;">
            <ManageNavict />
        </div>
        
        <div class="table">
            <div class="title">
                用户管理
            </div>
            <div style="margin-bottom: 20px;">
                全部用户：{{ myStore.user_lis.length }}
            </div>
            <div class="down">
                <el-table 
                    :data="myStore.user_lis" 
                    :height="myStore.user_lis.length > 14?600:auto" 
                    border 
                    style="width: 98%;--el-table-border-color: none;border-right: #03a850 solid;border-left: 1px #03a850 solid;border-bottom: 1px #03a850 solid;"
                      :highlight-current-row="false"
                      :header-cell-style="{ backgroundColor: '#03ab50', color: 'black', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px black solid', borderBottom: '1px black solid' }"
                      :cell-style="{ color: 'black', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #03a850 solid', borderLeft: '0.5px #03a850 solid' }"
                      :row-style="{ color: 'black', fontSize: '14px', textAlign: 'center', }"
                >
                    <el-table-column prop="user_id" label="用户编号" />
                    <el-table-column prop="username" label="用户名" />
                    <el-table-column prop="email" label="邮箱" />
                    <el-table-column prop="password"  label="密码" />
                    <el-table-column fixed="right" label="操作" >
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
                            >移除用户</el-button>
                        </template>
                      </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import ManageNavict from './ManageNavict.vue'
import { useStore } from '@/stores/counter'
import { onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';

const myStore =  useStore()

const fetchData = async (url) => {
  try {
    // 发起请求
    const response = await axios.get(url)

    // 更新数据到 Pinia Store
    myStore.set_Userlis(response.data.msg)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  fetchData('http://localhost:8000/manage/users')
})

const handleClick = (row) => {
  const storedData = sessionStorage.getItem('manage_token');
  const t = JSON.parse(storedData)
  if(t !== null){
    axios.post("http://localhost:8000/manage/del_user",{
      user_id:row.user_id
    },{
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
      }
    }).then((res) => {
      if(res.data.code === '200'){
        fetchData('http://localhost:8000/manage/users')
        ElMessage({
          message:res.data.infos,
          type:"success"
        })
      }else{
        ElMessage({
          message:res.data.infos,
          type:"error"
        })
      }
    })
  }else{
    ElMessage({
      message:"你看起来还没登录，请登录！",
      type:"error"
    })
  }
}


</script>

<style>
    .app{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: start;
    }
    .table{
        width: 98%;
        height: auto;
        margin: 0 auto;
        margin-left: 20px;
    }
    .title{
        width: 100%;
        height: auto;
        font-size: 25px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>